<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <uni-icons type="left" size="22" color="#fff"></uni-icons>
      </view>
      <view class="title">邻里服务协议</view>
    </view>

    <!-- 加载提示 -->
    <view class="loading" v-if="isLoading">
      <uni-load-more type="loading" color="#007aff"></uni-load-more>
      <view class="loading-text">正在加载...</view>
    </view>

    <!-- 错误提示 -->
    <view class="error" v-if="isError">
      <uni-icons type="warn" size="40" color="#ff5722"></uni-icons>
      <view class="error-text">加载失败</view>
      <button class="retry-btn" @click="loadPrivacyContent">重试</button>
    </view>
    
    <!-- WebView 组件，用于显示 HTML 内容 -->
	<view class="web">
    <web-view 
      :src="privacyUrl" 
      v-if="privacyUrl"
      @message="handleWebviewMessage"
      @load="onWebviewLoad"
      @error="onWebviewError"
    ></web-view>
	</view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      privacyUrl: '', // 云存储中 HTML 文件的 URL
      isLoading: true, // 是否正在加载
      isError: false // 是否加载失败
    };
  },
  onLoad() {
    // 页面加载时，加载隐私协议内容
    this.loadPrivacyContent();
  },
  methods: {
    loadPrivacyContent() {
      this.isLoading = true;
      this.isError = false;
      this.privacyUrl = ''; // 清空 URL 以隐藏 web-view

     this.privacyUrl = '/static/html/fuwuxueyi.html';
        
    

    },

    // WebView 加载完成事件
    onWebviewLoad() {
      console.log('WebView 内容加载完成');
      this.isLoading = false;
    },

    // WebView 加载失败事件
    onWebviewError(e) {
      console.error('WebView 加载失败:', e);
      this.isLoading = false;
      this.isError = true;
    },

    // 处理来自 WebView 的消息（如果需要双向通信）
    handleWebviewMessage(e) {
      console.log('收到 WebView 消息:', e.detail.data);
    },

    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
}
</script>

<style scoped>
.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 44px;
  background-color: #007aff;
  color: #fff;
}

.back-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

/* 加载样式 */
.loading, .error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.loading-text, .error-text {
  margin-top: 15px;
  font-size: 14px;
  color: #666;
}

/* 错误样式 */
.error-text {
  color: #ff5722;
}

.retry-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
}
.web{
	display: flex;
	  padding: 20rpx 50rpx;
}

/* web-view 默认占满剩余空间 */
web-view {
  flex: 1;

}
</style>